<template><el-tab-pane
        <el-card shadow="never" style="max-height: 700px; overflow: auto">

            <template>
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="待审核" name="1">
                                <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                                <el-form-item label="审核状态:" prop="status.value">
                                    <el-select v-model="apply_status" placeholder="审核状态" clearable>
                                        <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="update_apply_status">勾选后提交</el-button>
                                    <el-button type="warning" @click="statistical_sku">统计SKU</el-button>
                                </el-form-item>

                                <template>

                                    <el-row>
                                        <el-col :span="18">
                                            <el-table
                                                :data="formdata"
                                                max-height="500"
                                                border
                                                :loading="loading"
                                                @selection-change="handleSelectionChange"
                                                style="width: 100%">
                                                        <el-table-column
                                                            type="selection"
                                                            width="55">
                                                        </el-table-column>
                                                        <el-table-column
                                                            prop="brand"
                                                            label="编号"
                                                            width="">
                                                        </el-table-column>
                                                        <!-- <el-table-column
                                                            prop="batch"
                                                            label="批次号"
                                                            width="">
                                                        </el-table-column> -->
                                                        <el-table-column
                                                            prop="merge_sku"
                                                            label="SKU"
                                                            width="">
                                                        </el-table-column>
                                                        
                                                        <el-table-column
                                                            prop="color"
                                                            label="颜色"
                                                            width="">
                                                        </el-table-column>
                                                        <el-table-column
                                                            prop="sku"
                                                            label="尺码"
                                                            width="">
                                                        </el-table-column>

                                                        <el-table-column
                                                            prop="num"
                                                            label="申请数量"
                                                            width="">
                                                        </el-table-column>

                                                        <!-- <el-table-column
                                                            prop="batch"
                                                            label="批次号"
                                                            width="">
                                                        </el-table-column>
                                                        <el-table-column
                                                            prop="admin_title"
                                                            label="申请人"
                                                            width="">
                                                        </el-table-column>
                                                        <el-table-column
                                                            prop="apply_time"
                                                            label="申请时间"
                                                            width="">
                                                        </el-table-column> -->
                                                        <!-- <el-table-column
                                                            prop="apply_status_title"
                                                            label="审核状态"
                                                            width="">
                                                        </el-table-column> -->
                                                        <el-table-column
                                                            prop="apply_type_title"
                                                            label="申请类型"
                                                            width="">
                                                        </el-table-column>
                                                </el-table>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-table
                                                :data="statistical_sku_arr"
                                                max-height="500"
                                                border
                                                style="width: 100%">
                                                        <el-table-column
                                                            prop="merge_sku"
                                                            label="SKU"
                                                            width="">
                                                        </el-table-column>
                                                        <el-table-column
                                                            prop="num"
                                                            label="总数量"
                                                            width="">
                                                        </el-table-column>
                                                </el-table>
                                        </el-col>
                                    </el-row>

                                        
                                    </template>

                                <!-- <el-form-item>
                                    <el-button type="primary" @click="submitForm">确认 </el-button>
                                    <el-button type="warning" @click="cancel">取消 </el-button>
                                </el-form-item> -->
                            </el-form>

                    </el-tab-pane>
                    <el-tab-pane label="详情" name="2">
                        <el-table
                            :data="formdata"
                            max-height="500"
                            border
                            :loading="loading"
                            row-key="batch"
                            lazy
                            :load="load"
                            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                            @selection-change="handleSelectionChange"
                            style="width: 100%">
                                    <el-table-column
                                        type="selection"
                                        width="55">
                                    </el-table-column>
                                    <el-table-column
                                        prop="brand"
                                        label="编号"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="merge_sku"
                                        label="SKU"
                                        width="">
                                    </el-table-column>
                                    
                                    <el-table-column
                                        prop="color"
                                        label="颜色"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="sku"
                                        label="尺码"
                                        width="">
                                    </el-table-column>

                                    <el-table-column
                                        prop="num"
                                        label="申请数量"
                                        width="">
                                    </el-table-column>

                                    <el-table-column
                                        prop="batch"
                                        label="批次号"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="admin_title"
                                        label="申请人"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="apply_time"
                                        label="申请时间"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="merge_status_title"
                                        label="状态"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="apply_type_title"
                                        label="申请类型"
                                        width="">
                                    </el-table-column>
                            </el-table>

                    </el-tab-pane>
                </el-tabs>
            </template>

            
        </el-card>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {

            },
            form: {  },
            formdata:[],
            statistical_sku_arr:[],
            multipleSelection:[],
            batch:[],
            merge_batch:0,
            api: {
                update_apply_status: `/admin/purchaseds/update_apply_status`,
                statistical_sku: `/admin/purchaseds/statistical_sku`,
            },
            options: [
                {
                value: '7',
                    label: '作废'
                }, 
                {
                value: '2',
                label: '通过审核'
                }, 
                {
                    value: '8',
                    label: '驳回审核'
                }
            ],
            apply_status: '',
            activeName: '1',
            formid: 0,
            loading: false,
        }
    },
    created () {
        // this.now()
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.formdata = nval.data
                        this.formid = nval.id
                        this.merge_batch = nval.merge_batch
                    })
                }
            },
            immediate: true,
            deep: false,
        },
        
    },
    methods: {
        load(tree, treeNode, resolve) {
            this.request
                .post('/admin/purchaseds/get_info_batch', { batch:tree.batch})
                .then(response => {
                    if(response.code == 1){
                        resolve(response.data)
                    }
                })
                .finally(() => {
                })
        },
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        handleClick(tab, event) {
            this.formdata = []
            this.loading = true
            this.request
                .post('/admin/purchaseds/edit', { id: this.formid,type:tab.index })
                .then(response => {
                    this.formdata = response.data.data
                    this.formid = response.data.id
                    this.loading = false
                })
                .finally(() => {
                })
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        },
        handleSelectionChange(rows) {
            this.multipleSelection = [];
            // this.batch = [];
            if (rows) {
                rows.forEach(row => {
                    this.multipleSelection.push(row.id);
                    // this.batch.push(row.batch);
                });
            }
        },

        update_apply_status() {
            this.$confirm(`确认提交?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.baseRequest2()
                })
                .catch(err => {})
        },
        statistical_sku() {
            this.$confirm(`确认统计SKU?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.request
                        .post(this.api.statistical_sku, { id:this.multipleSelection,merge_batch:this.merge_batch})
                        .then(response => {
                            if(response.code == 1){
                                this.statistical_sku_arr = response.data
                            }
                        })
                        .finally(() => {
                            
                        })
                })
                .catch(err => {})
        },
        baseRequest2() {
            this.loading = true
            this.request
                .post(this.api.update_apply_status, { id:this.multipleSelection,apply_status:this.apply_status,merge_batch:this.merge_batch})
                .then(response => {
                    if(response.code == 1){
                        this.$message.success('修改成功');
                    }
                    this.$emit('editFormCancel');
                })
                .finally(() => {
                    this.loading = false
                })
        },
        // async now() {
        //     let response = await this.request.post('/admin/purchaseds/get_apply_status', {})
            
        //     if(response == 2){
                
        //     }else{
                
        //     }
        // },

    }
}
</script>
